<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="标题" prop="title">
            <Input v-model="formValidate.title" placeholder="标准：地区+某（资金主体/资金类型）+金额+寻某项目+合作"></Input>
        </FormItem>
        <FormItem label="资金主体" prop="capital_type">
            <Select v-model="formValidate.capital_type" placeholder="请选择资金主体">
                <Option value="小额贷款">小额贷款</Option>
                <Option value="典当公司">典当公司</Option>
                <Option value="担保公司">担保公司</Option>
            </Select>
        </FormItem>
        <FormItem label="所在地区" prop="area">
            <Row>
                <Col span="12">
                    <al-selector v-model="formValidate.area" data-type="name" level="2"/>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="意向地区" prop="investment_area">
            <AreaAlterMultSelector v-model="formValidate.investment_area"></AreaAlterMultSelector>
            <span>{{formValidate.investment_area.join(",")}}</span>
        </FormItem>
        <FormItem label="意向行业" prop="investment_industry">
            <IndustryAlterMultSelector v-model="formValidate.investment_industry"></IndustryAlterMultSelector>
            <span>{{formValidate.investment_industry.join(",")}}</span>
        </FormItem>
        <FormItem label="投资金额">
            <FormItem prop="amount_min" style="float:left;">
                <InputNumber :max="formValidate.amount_max" :min="1" v-model="formValidate.amount_min"></InputNumber>
            </FormItem>
            <span style="float:left;padding:0 5px">-</span>
            <FormItem prop="amount_max" style="float:left;">
                <InputNumber :min="formValidate.amount_min" v-model="formValidate.amount_max"></InputNumber>
            </FormItem>
            <span style="float:left;padding:0 5px">万元</span>
        </FormItem>
        <FormItem label="投资期限">
            <FormItem prop="term_min" style="float:left;">
                <InputNumber :max="formValidate.term_max" :min="1" v-model="formValidate.term_min"></InputNumber>
            </FormItem>
            <span style="float:left;padding:0 5px">-</span>
            <FormItem prop="term_max" style="float:left;">
                <InputNumber :min="formValidate.term_min" v-model="formValidate.term_max"></InputNumber>
            </FormItem>
            <span style="float:left;padding:0 5px">年</span>
        </FormItem>
        <FormItem label="投资类型" prop="investment_type">
            <RadioGroup v-model="formValidate.investment_type">
                <Radio label="股权投资">股权投资</Radio>
                <Radio label="债权投资">债权投资</Radio>
                <Radio label="金融投资">金融投资</Radio>
                <Radio label="BT/BOT项目投资">BT/BOT项目投资</Radio>
                <Radio label="其他投资">其他投资</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="投资要求" prop="requirement">
            <Input v-model="formValidate.requirement" type="textarea" :autosize="{minRows: 2,maxRows: 10}" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="需提供资料" prop="needed_appendix">
            <CheckboxGroup v-model="formValidate.needed_appendix">
                <Checkbox v-for="item in ['商业/项目计划书','公司证件','相关财务资料','其他资料']" :label="item"></Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem label="缩略图">
            <Row :gutter="16">
                <Col span="12">
                    <Card>
                        <img :src="formValidate.thumbnail.dataUrl" style="width:100%"/>
                    </Card>
                </Col>
                <Col span="6">
                    <ImageEditor v-model="formValidate.thumbnail"></ImageEditor>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="附件" prop="appendix">
            <UploadedList v-model="formValidate.appendix"></UploadedList>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')" :loading="waiting_button==1" :disabled="waiting_button!=1&&waiting_button!=0">发布项目</Button>
            <Button type="ghost" @click="handleDraft('formValidate')" style="margin-left: 8px" :loading="waiting_button==2" :disabled="waiting_button!=2&&waiting_button!=0">存为草稿</Button>
        </FormItem>
    </Form>
</template>
<script>
    import Vue from 'vue';
    import iviewArea from 'iview-area';
    import Investment from "@/common/model/Investment";
    import AreaAlterMultSelector from "../main-components/area-alter-mult-selector";
    import IndustryAlterMultSelector from "../main-components/industry-alter-mult-selector";
    import UploadedList from "../main-components/uploaded-list";
    import ImageEditor from "../main-components/image-editor/image-editor.vue";
    Vue.use(iviewArea);

    export default {
        data () {
            return {
                formValidate: new Investment(),
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: 'Please select the city', trigger: 'change' }
                    ],
                    gender: [
                        { required: true, message: 'Please select gender', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
                    ],
                    time: [
                        { required: true, type: 'date', message: 'Please select time', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ]
                },
                waiting_button: 0
            }
        },
        components: {
            AreaAlterMultSelector, IndustryAlterMultSelector, UploadedList, ImageEditor
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    this.waiting_button = 1;
                    if (valid) {
                        if(this.formValidate.id) {
                            if(this.formValidate.status != 0 && !confirm("修改后需要等待管理员审核，确认修改吗？")) return;
                            this.api.post("investment/re_post", this.formValidate.serialize(), res => {
                                this.formValidate.status = 1;
                                this.$Message.success('提交成功，等待审核通过!');
                                this.waiting_button = 0;
                            });
                        }else {
                            this.api.post("investment/post", this.formValidate.serialize(), res => {
                                this.formValidate.id = res.id;
                                this.formValidate.status = 1;
                                this.$Message.success('提交成功，等待审核通过!');
                                this.waiting_button = 0;
                            });
                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleDraft (name) {
                this.$refs[name].validate((valid) => {
                    this.waiting_button = 2;
                    if (valid) {
                        if(this.formValidate.id) {
                            if(this.formValidate.status != 0 && !confirm("确定将已发布的项目存为草稿吗，重新发布将需要管理员审核？")) return;
                            this.api.post("investment/re_draft", this.formValidate.serialize(), res => {
                                this.formValidate.status = 0;
                                this.$Message.success('已存为草稿!');
                                this.waiting_button = 0;
                            });
                        }else {
                            this.api.post("investment/draft", this.formValidate.serialize(), res => {
                                this.formValidate.id = res.id;
                                this.formValidate.status = 0;
                                this.$Message.success('已存为草稿!');
                                this.waiting_button = 0;
                            });
                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            }
        },
        created() {
            if(this.$route.query.id) {
                this.api.post("investment/get", { id: this.$route.query.id }, res => {
                    this.formValidate = Investment.parse(res.data);
                });
            }
        }
    }
</script>
